<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动订单管理</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .header {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }
        .search {
            width: 200px;
        }
        .fenye {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div">
        <div class="header">
<!--            <el-button type="success" @click="addDialogVisible = true">新增活动信息</el-button>-->

            <el-select v-model="pageExample.campId" placeholder="请选择营地">
                <el-option value="">请选择营地</el-option>
                <el-option
                        v-for="camp in camps"
                        :key="camp.campId"
                        :label="camp.campname"
                        :value="camp.campId">
                </el-option>
            </el-select>

            <el-input class="search" placeholder="输入活动编号：" clearable suffix-icon="el-icon-search"
                      v-model="pageExample.actId"></el-input>

            <el-select v-model="pageExample.status" placeholder="请选择活动状态">
                <el-option value="">请选择支付状态</el-option>
                <el-option
                        key="2"
                        label="待支付"
                        value="2">
                </el-option>
                <el-option
                        key="3"
                        label="已支付"
                        value="3">
                </el-option>
                <el-option
                        key="4"
                        label="已使用"
                        value="4">
                </el-option>
                <el-option
                        key="5"
                        label="已取消"
                        value="5">
                </el-option>
                <el-option
                        key="6"
                        label="已过期"
                        value="6">
                </el-option>
            </el-select>

            <el-button type="primary" @click="selectAllActiveOrder()">查询</el-button>
        </div>

        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <img class="camp_img" :src="props.row.imgs[0].url" />
                            <el-form-item label="活动介绍">
                                <span>{{ props.row.introduce }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="activityOrderId">
                </el-table-column>
                <el-table-column label="活动编号" prop="actId">
                </el-table-column>
                <el-table-column label="订单状态">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" v-if="scope.row.status == 2">待支付</span>
                        <span style="margin-left: 10px" v-if="scope.row.status == 3">已支付</span>
                        <span style="margin-left: 10px" v-if="scope.row.status == 4">已使用</span>
                        <span style="margin-left: 10px" v-if="scope.row.status == 5">已取消</span>
                        <span style="margin-left: 10px" v-if="scope.row.status == 6">已过期</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量" prop="number">
                </el-table-column>
                <el-table-column label="总价" prop="total">
                </el-table-column>
                <el-table-column label="姓名" prop="username">
                </el-table-column>
                <el-table-column label="电话" prop="tel">
                </el-table-column>
                <el-table-column label="活动开始时间" prop="time" width="220">
                </el-table-column>
                <el-table-column label="订单生成时间" prop="orderTime" width="220">
                </el-table-column>
<!--                <el-table-column label="操作">-->
<!--                    <template scope="scope">-->
<!--                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
        </template>

        <div class="fenye">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageIndex"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="page.number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.count">
            </el-pagination>
        </div>

    </div>

    <script>
        new Vue({
            el:'#div',
            data:{

                tableData:[],
                camps:[],
                types:[],

                pageExample: {
                    campId:'',
                    status:"",
                    actId:''
                },

                page:{
                    pageIndex:1,
                    number:2,
                    pageCount:null,
                    count:null
                }
            },
            created(){
                this.getActId();
                this.selectCamp();
                this.selectAllActiveOrder();
            },
            methods:{
                getActId(){
                    var actId=location.search.substr(1);
                    if(actId != 0){
                        this.pageExample.actId = actId;
                    }
                },
                selectCamp() {
                    var _this = this;
                    $.ajax({
                        url: "/active/selectAllCampAndTypes",
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            _this.camps = data.list[0];
                            _this.types = data.list[1];
                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                selectAllActiveOrder(){
                    this.pageExample.pageIndex = this.page.pageIndex,
                        this.pageExample.number = this.page.number,
                        console.log(this.pageExample);
                    var _this = this;
                    $.ajax({
                        url: "/active/selectAllActOrderCampAndTypes",
                        type: "get",
                        data:_this.pageExample,
                        dataType: "json",
                        success: function (data) {
                            _this.tableData = data.list;
                            _this.page = data.obj;
                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                handleCurrentChange(val){
                    this.page.pageIndex = val;
                    this.selectAllActiveOrder();
                },
                handleSizeChange(val){
                    this.page.number = val;
                    this.selectAllActiveOrder();
                }
            }
        });
    </script>
</body>
</html>